<template>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button class="navbar-toggle collapsed" type="button"
                data-toggle="collapse" data-target="#cake-navbar-collapse"
                aria-expanded="false">
          <span class="sr-only">导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">数据报表平台</a>
      </div>


      <div class="collapse navbar-collapse" id="cake-navbar-collapse">
        <ul class="nav navbar-nav">
          <li v-for='item in navbarItems' :class="[currentIndex === $index ? 'active': '']">
            <a href="#" @click.prevent='onNavBarItemSeleted($index, item, $event)'>{{ item.name }}</a>
          </li>
        </ul>
        <p class="navbar-text navbar-right">
          <a class="navbar-link" href="#">退出</a>
        </p>
      </div>
    </div><!-- .container end -->
  </nav>
</template>

<script type="text/babel">
  import Utils from '../app/utils'
  export default {
    props: {
      navbarItems: {
        type: Array,
        default: function () {
          return []
        }
      },
      defaultSelectedItem: {
        type: Number,
        default: 0
      }
    },
    data: function () {
      return {
        currentIndex: -1,
        prepareCallback: undefined
      }
    },
    methods: {
      initItems: function (items, defaultItem, func) {
        var self = this
        self.navbarItems = items
        if (Utils.isFunction(defaultItem)) {
          func = defaultItem
          defaultItem = self.defaultSelectedItem
        }
        if (defaultItem === undefined) {
          defaultItem = self.defaultSelectedItem
        } else if (defaultItem !== self.defaultSelectedItem) {
          self.defaultSelectedItem = defaultItem
        }
        self.currentIndex = defaultItem
        self.goto(self.currentIndex)

        if (func) {
          func(self.currentIndex)
        }
      },
      prepareGoTo: function (func) {
        this.prepareCallback = func
      },
      goto: function (index) {
        var self = this
        var tagItem
        if (index < self.navbarItems.length) {
          tagItem = self.navbarItems[index]
        }

        if (self.$router && tagItem && tagItem.path) {
          var path = tagItem.path
          var routeObj = {
            path: path,
            replace: index === self.defaultSelectedItem
          }
          if (Utils.isFunction(self.prepareCallback)) {
            var o = self.prepareCallback(path)
            if (o) {
              routeObj = Utils.extends(routeObj, o)
            }
          }
          self.$router.go(routeObj)
        }
      },
      onNavBarItemSeleted: function (index, item, event) {
        var self = this
        if (self.currentIndex === index) {
          return
        }
        self.currentIndex = index
        self.goto(index)
        self.$dispatch('ON_NAVBAR_ITEM_SELECTED', self, index, item, event)
        if (self.$store) {
          self.$store.dispatch('ON_NAVBAR_ITEM_SELECTED', self, index, item, event)
        }
      }
    }
  }
</script>

<style lang='less'>
</style>
